<template>
	<view class="mydetail-body">
		<tn-tabs :list="scrollList" :current="currentTab" :showBar="false" @change="tabChange"></tn-tabs>
		<view class="calendar-box">
		    <uni-calendar 
		    :insert="true"
		    @change="change"
			:selected="selectedList"
			@monthSwitch="monthSwitch"
		     />
		</view>
		<view class="tn-padding">
			<view class=" border-line-view tn-border-black"></view>
		</view>
		<view class="tn-padding-left-sm tn-padding-right-sm">
			<view class="tn-text-lg tn-margin-bottom-sm tn-flex tn-flex-row-between">
				<text>当日考勤</text>
				<tn-button size="sm" backgroundColor="#01BEFF" fontColor="#ffffff" @click="tongbukaoqin">同步考勤</tn-button>
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-border-black tn-padding-sm tn-margin-bottom-sm record-item">
				<view>
					<image v-if="dakaInfo.data&&dakaInfo.data.shangbanka" src="../../static/success.png" class="record-icon"></image>
					<image v-else src="../../static/warning.png" class="record-icon"></image>
				</view>
				<view class="justify-content-item tn-flex-1">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-left tn-padding-left">
						<view>
							上午
						</view>
						<view class="">
							{{dakaInfo.data?dakaInfo.data.shangbanka:''}}
						</view>
					</view>
				</view>
				<view class="justify-content-item ">
					<view class="tn-flex tn-flex-col-center tn-flex-row-right tn-padding-right" :class="[dakaInfo.data&&dakaInfo.data.xiabanka?'':'text-color-9']">
						{{dakaInfo.data&&dakaInfo.data.shangbanka?'已签到':'未签到'}}
					</view>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-border-black tn-padding-sm record-item">
				<view>
					<image v-if="dakaInfo.data&&dakaInfo.data.xiabanka" src="../../static/success.png" class="record-icon"></image>
					<image v-else src="../../static/warning.png" class="record-icon"></image>
				</view>
				<view class="justify-content-item tn-flex-1">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-left tn-padding-left">
						
						<view>
							下午
						</view>
						<view class="">
							{{dakaInfo.data?dakaInfo.data.xiabanka:''}}
						</view>
					</view>
				</view>
				<view class="justify-content-item ">
					<view class="tn-flex tn-flex-col-center tn-flex-row-right tn-padding-right" :class="[dakaInfo.data&&dakaInfo.data.xiabanka?'':'text-color-9']">
						{{dakaInfo.data&&dakaInfo.data.xiabanka?'已签到':'未签到'}}
					</view>
				</view>
			</view>
		</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	
		export default {
			name: 'mykaoqin',
			data(){
				return {
					scrollList: [
					],
					currentTab: 0,
					selectedList: [
					],
					userInfo: {},
					dakaInfo: {},
					today: '',
				}
			},
			mounted() {
				let userInfo = uni.getStorageSync('userInfo');
				if(userInfo){
					this.userInfo = userInfo;
					this.scrollList.push({name: userInfo.childName})
				}
				let _date = new Date();
				let yyyy = _date.getFullYear();
				let mm = _date.getMonth()+1;
				if(mm < 10){ mm = '0'+mm}
				let m_time = yyyy + '-' + mm;
				let dd = _date.getDate();
				if(dd < 10){ dd = '0'+dd}
				this.today = yyyy + '-' + mm + '-' + dd;
				this.getDetail(m_time)
			},
			methods:{
				
					getDetail(time){
						this.request({
							url: '/ChildAttendance/AdmissionRecordDetail',
							method: 'get',
							params: {
								Month: time
							},
						}).then(res => {
							if(res.code == 200){
								this.selectedList = res.data;
								let info = this.selectedList.find(item => {return item.date == this.today})
								if(info){
									this.dakaInfo = info;
								}
							}
						})
					},
				  tabChange(index) {
					this.currentTab = index
				  },
				change(val){
					let info = this.selectedList.find(item => {return item.date == val.fulldate})
					console.log(info)
					this.dakaInfo = {};
					if(info){
						this.dakaInfo = info;
					}
				},
				monthSwitch(val){
					console.log('选择月份 ====', val)
					let m_time = val.year + '-' + val.month;
					this.dakaInfo = {};
					this.getDetail(m_time);
				},
				tongbukaoqin(){
					this.request({
						url: '/equipment/ParentSyncData',
						method: 'post',
						params: {
							parentId: this.userInfo.userId
						},
					}).then(res => {
						if(res.code == 200){
							this.$refs.toast.show({
							  title: '',
							  content: '同步成功',
							  icon: '',
							  image: '',
							  duration: 1000
							})
						}
					})
				}
			},
		}
</script>

<style lang="scss" scoped>
	.mydetail-body{
	  min-height: 100vh;
	  background-color: #FFFCF2;
	  
	  .calendar-box{
		  margin: 0 30rpx;
		  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.08); 
		  border-radius: 16rpx;
		  overflow: hidden;
	  }
	  
	  .record-item{
		  background-color: #fff;
		  border-radius: 16rpx;
		  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.08); 
		  
		  .text-color-9{
			  color: #999999;
		  }
		  .record-icon{
			  width:76rpx;
			  height:76rpx;
		  }
	  }
	}
</style>